<template>
  <div style="width:500px">
    <div>
      <el-form status-icon class="login_form" :model="loginVo" ref="loginRef">
        <el-form-item prop="username" :rules="[
          { required: true, message: 'Please enter the email address', trigger: 'blur' },
          { type: 'email', message: 'Please enter the correct email address', trigger: ['blur', 'change'] }
        ]">
          <el-input v-model="loginVo.username" clearable placeholder="Email" prefix-icon="el-icon-user" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password" :rules="[
          { required: true, message: 'Please enter the password', trigger: 'blur' },
          {min:6,max:15,message:'The length is between 6 to 15',trigger: 'blur'}
        ]">
          <el-input type="password" v-model="loginVo.password" maxlength="15" placeholder="Password" prefix-icon="el-icon-lock" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">Login</el-button>
          <el-link type="primary">Forget password?</el-link>
        </el-form-item>
      </el-form>
    </div>
    <div></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //用户登录数据
      loginVo: {
        username: "admin@163.com",
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.loginRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("login", this.loginVo);
        if (res.meta.status !== 200)
          return this.$message.error("Login failed !");
        window.sessionStorage.setItem("token", res.data.token);
        this.$message({
          message: "Login successful !",
          type: "success",
          duration: "2000",
          onClose: () => {
            this.$router.push("/home");
          },
        });
      });
    },
  },
};
</script>
<style lang="less" scoped></style>
